<template>
	<div class="c-c-panel">
		<div class="c-c-info-view">
			<span class="c-c-label" v-text="data.attribute"></span>
			<span class="c-c-name" v-text="data.name"></span>
			<span v-text="data.offerTimeFormat"></span>
		</div>
		<div class="c-c-info-view">
			<span class="c-c-key">职务：</span>
			<span class="c-c-value" v-text="data.job"></span>
		</div>
		<div class="c-c-info-view">
			<span class="c-c-key">备注：</span>
			<span class="c-c-value" v-text="data.detail"></span>
		</div>
		<div class="c-c-info-view">
			<span class="c-c-key">邀请人：</span>
			<span class="c-c-value" v-text="data.userName"></span>
		</div>
		<div class="c-c-info-view">
			<span class="c-c-key">被邀请人：</span>
			<span class="c-c-value" v-text="data.offerUserName"></span>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'COfferItem',
		data() {
			return {}
		},
		components: {},
		props: ['data']
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.c-c-panel {
		background-color: #FFFFFF;
		padding: 20px;
	}
	
	.c-c-label {
		background-color: #FF6D00;
		border-radius: 3px;
		padding: 2px 6px;
		color: #FFF;
		font-size: 13px;
		margin-right: 5px;
	}
	
	.c-c-name {
		font-size: 15px;
		color: #000000;
		opacity: 0.87;
		flex: 1;
	}
	
	.c-c-info-view {
		display: flex;
		margin-top: 8px;
	}
	
	.c-c-key {
		font-size: 14px;
		color: #000000;
		opacity: 0.54;
	}
	
	.c-c-value {
		font-size: 14px;
		color: #000000;
		opacity: 0.87;
	}
</style>